<template>
	<u-popup :show="show" :mode="mode" @close="close" :closeOnClickOverlay="isClose" :custom-style="{
			background:'transparent'
		}">
		<view class="diaBox" :style="{
			width:width
		}">
			<view class="title" v-if="title">{{title}}</view>
			<slot name="dia-tit" v-else></slot>
			<view class="content" v-if="content">
				<text>{{content}}</text>
			</view>
			<slot v-else name="dia-cont"></slot>
			<view class="btns" v-if="showBtns">
				<view class="btnOut" v-if="showCancel">
					<view class="btn" @click="close">
						<text v-if="cancelText">{{cancelText}}</text>
						<text v-else>取消</text>
					</view>
				</view>
				<view class="btnOut btnOut2">
					<view class="btn" @click="comfire">
						<text>确定</text>
					</view>
				</view>
			</view>
			<slot v-else name="dia-btns"></slot>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			width: {
				type: String,
				default: "90vw"
			},
			mode: {
				type: String,
				default: "center"
			},
			closeDia: {
				type: Function,
				default: () => {}
			},
			title: {
				type: String,
				default: ""
			},
			showBtns: {
				type: Boolean,
				default: false
			},
			comfireFunc: {
				type: Function,
				default: () => {}
			},
			content: {
				type: String,
				default: ""
			},
			isClose: {
				type: Boolean,
				default: true
			},
			showCancel: {
				type: Boolean,
				default: true
			},
			cancelText:{
				type: String,
				default: ""
			}
		},
		data() {
			return {
				show: false,
			}
		},
		methods: {
			close() {
				this.show = false
				this.$emit("closeDia")
			},
			comfire() {
				// this.show = false
				this.$emit("comfireFunc")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 32rpx;
		text-align: center;
		font-style: normal;
		text-align: center;
		margin-top: 30rpx;
	}

	.diaBox {
		background: rgba(50, 51, 59, 0.82);
		border-radius: 60rpx;
		border: 2rpx solid #3c3e44;
		backdrop-filter: blur(7px);
		padding: 58rpx;
		box-sizing: border-box;

		.btns {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;

			.btnOut {
				flex: 1;
				border-radius: 64rpx;
				box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
				margin-right: 50rpx;
				height: 85rpx;

				&:last-child {
					margin-right: 0;
				}
			}

			.btnOut2 {
				box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);

				.btn {
					background: #2cb3af;
				}
			}

			.btn {
				width: 100%;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 85rpx;
				text-align: center;
				border-radius: 64rpx;
				box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;

			}
		}

		.title {
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
		}
	}
</style>
